<!-- 维修操作-维修信息 -->
<template>

	<Card :border="false">
		<template #head>
			<view class="u-flex">
				<view class="u-flex-1">
					维修信息
				</view>
				<view class="u-flex-1 u-text-right">
					<HButton plain :block="false" size="small" @click="showPopup = true">
						添加维修项
					</HButton>
				</view>
			</view>
		</template>
		<template #body>
			<view class="table">
				<view class="table-head u-p-l-20">
					<view class="table-head-label u-flex-2">
						维修项名称
					</view>
					<view class="table-head-label u-flex-1">
						数量
					</view>
					<view class="table-head-label u-flex-1">
						附件
					</view>
				</view>
				<view class="table-body u-p-l-20 u-p-r-20">
					<view class="table-body-column u-flex u-border-bottom" v-for="(item,index) in repairList" :key="index">
						<view class="table-body-column--value u-flex-2">
							{{item.name}}
						</view>
						<view class="table-body-column--value u-flex-1">
							{{item.num}}
						</view>
						<view class="table-body-column--value u-flex-1 u-flex u-row-between ">
							<view class="file-text">
								<u-icon name="attach" class="u-m-r-20"></u-icon>
								{{item.fileNum}}
							</view>
							<u-icon @click="onDelete(index)" name="trash-fill" color="#c7ccd1"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template #footer>
			<Popup v-model="showPopup">
				<CellField required label="名称" v-model="addParams.name"></CellField>
				<CellField required label="数量" type="number" v-model="addParams.num"></CellField>
				<CellAttachment v-model="addParams.enclosure"></CellAttachment>
				<template #bottom>
					<view class="u-p-l-30 u-p-r-30 u-border-top">
						<BetweenButtonGroup :leftPlain="false" @leftClick="onLeftClick" @rightClick="onRightClick">
							<template #left>
								完成添加
							</template>
							<template #right>
								继续添加
							</template>
						</BetweenButtonGroup>
					</view>
				</template>
			</Popup>
		</template>



	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	import BetweenButtonGroup from '@/components/buttonGroup/optionButtonGroup.vue'
	import HButton from '@/components/button/index.vue'
	import Popup from '../../../../popup/optionPopup.vue'
	import PhotoButton from '@/components/button/photo.vue'
	import VideoButton from '@/components/button/video.vue'
	import UploadButton from '@/components/button/upload.vue'
	import CellAttachment from '@/components/cell/itemAttachment.vue'
	export default {

		components: {
			Card,
			HButton,
			Popup,
			CellAttachment,
			BetweenButtonGroup,
			PhotoButton,
			VideoButton,
			UploadButton
		},
		data() {
			return {
				showPopup: false,
				addParams: {
					name: '',
					num: 0,
					enclosure: '[]'
				},

				repairList: []
			}
		},
		methods: {
			addParamsValidate() {
				let {
					name,
					num
				} = this.addParams
				if (!name || !num) {
					wx.showToast({
						title: '校验不通过',
						icon: 'error'
					})
					return false
				}
				return true
			},
			addParamsFormatter() {
				Object.assign(this.addParams, {
					fileNum: JSON.parse(this.addParams.enclosure).length
				})
				console.log(this.addParams);
				this.repairList.push(this.addParams)
				console.log(this.repairList);
			},

			resetAddParams() {
				this.addParams = {
					name: '',
					num: 0,
					enclosure: '[]'
				}
			},
			//删除
			onDelete(index) {
				this.repairList.splice(index, 1)
			},
			// 完成添加
			onLeftClick() {
				if (this.addParamsValidate()) {
					this.addParamsFormatter()
					this.showPopup = false
					this.resetAddParams()
				}
			},
			// 继续添加
			onRightClick() {
				if (this.addParamsValidate()) {
					this.addParamsFormatter()
					this.resetAddParams()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table {
		display: flex;
		flex-direction: column;

		&-head {
			display: flex;
			align-items: center;
			height: 72rpx;
			background-color: #DEE2EE;
			border-radius: 16rpx 16rpx 0 0;


			&-label {
				font-weight: 600;
				font-size: 28rpx;
				color: #0F2E4D;
			}
		}

		&-body {
			display: flex;
			flex-direction: column;

			&-column {
				height: 100rpx;

				&--value {
					font-weight: 400;
					font-size: 28rpx;
					color: #0F2E4D;
				}
			}
		}

		.file-text {
			color: #409EFF;
		}
	}
</style>
